<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" class="demo-form-inline">
        <!-- 表格 stripe是否显示斑马 data数组,展示的数据,border 是否有边框  -->
        <el-table stripe :data="authoityList" border>
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="authName" label="权限名称"></el-table-column>
          <el-table-column prop="path" label="路径"></el-table-column>
          <el-table-column prop="level" label="等级" width="300">
            <template v-slot="scope">
              <el-tag v-if="scope.row.level == 0">一级</el-tag>
              <el-tag type="success" v-else-if="scope.row.level == 1">二级</el-tag>
              <el-tag type="warning" v-else>三级</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import request from '@/util/request'
const authoityList = ref([])
// 获取权限列表
const getRightList = async () => {
  const { data, meta }: any = await request({
    url: '/rights/list',
    method: 'GET',
  })
  if (meta.status !== 200) {
    ElMessage.error('获取失败')
  }
  authoityList.value = data
}
onMounted(() => {
  getRightList()
})
</script>

<style scoped></style>
